---
id: pin-input
title: Pin Input
description: For pin or verification codes with auto-focus transfer and masking options.
---

<ComponentPreview id="PinInput" />

## Anatomy

To set up the pin input correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="pin-input" />

## Examples

Learn how to use the `PinInput` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Setting a default value

To set the initial value of the pin input, set the `defaultValue` prop.

<Example id="initial-value" />

### Changing the placeholder

To customize the default pin input placeholder `○` for each input, pass the placeholder prop and set it to your desired
value.

<Example id="customized" />

### Blur on complete

By default, the last input maintains focus when filled, and we invoke the `onValueComplete` callback. To blur the last
input when the user completes the input, set the prop `blurOnComplete` to `true`.

<Example id="blurred" />

### Using OTP mode

To trigger smartphone OTP auto-suggestion, it is recommended to set the `autocomplete` attribute to "one-time-code". The
pin input component provides support for this automatically when you set the `otp` prop to true.

<Example id="otp-mode" />

### Securing the text input

When collecting private or sensitive information using the pin input, you might need to mask the value entered, similar
to `<input type="password"/>`. Pass the `mask` prop to `true`.

<Example id="with-mask" />

### Listening for changes

The pin input component invokes several callback functions when the user enters:

- `onValueChange` — Callback invoked when the value is changed.
- `onValueComplete` — Callback invoked when all fields have been completed (by typing or pasting).
- `onValueInvalid` — Callback invoked when an invalid value is entered into the input. An invalid value is any value
  that doesn't match the specified "type".

### Using the Field Component

The `Field` component helps manage form-related state and accessibility attributes of a pin input. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Using the Root Provider

The `RootProvider` component provides a context for the pin-input. It accepts the value of the `usePin-input` hook. You
can leverage it to access the component state and methods from outside the pin-input.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="pin-input" />

### Context

These are the properties available when using `UpinUinput.Context`, `useUpinUinputContext` hook or `useUpinUinput` hook.

<ContextType id="pin-input" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="pin-input" />
